/**
 * Created by bianbian3 on 2018/8/29.
 */
/**
 * Created by bianbian3 on 2018/8/29.
 */

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, TouchableHighlight, Dimensions, Text, TouchableOpacity, Image, Slider } from 'react-native';
import { MtChar, MtCheckItem, MtColor } from 'martian-ui';
const { MtM1, MtT3 } = MtChar;
import { Switch } from 'react-native-switch';
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
const { width, height } = Dimensions.get('window');
import { BoxShadow } from 'react-native-shadow'
class ThreeLabelBar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			roomTemperature: 0,
			temperature: 0,
		}
	}
	_onModelPressButton() {


	}
	render() {
		const { firstLineTitle, firstLineValue,secondLineValue,secondLineTitle,thirdLineTitle, thirdLineValue, barWidth,barHeight, containerStyle, minimumValue, maximumValue } = this.props;

		return (
			<View style={[{flex: 1, alignItems:'center'}, containerStyle]}>
				<BoxShadowYaGuan
					width={barWidth}
					height={barHeight}
					renderItem={()=>{
						return (
							<View style={styles.settings}>
								<View style={[styles.flex]}>
									<Text style={styles.temperatureTitle}>{firstLineTitle}</Text>
									<Text style={styles.temperatureText1}>
										{firstLineValue}
										<Text style={{fontSize: 16}}>℃</Text>
									</Text>
								</View>
								<View style={[styles.flex]}>
									<Text style={styles.temperatureTitle}>{secondLineTitle}</Text>
									<Text style={styles.temperatureText2}>
										{secondLineValue}
										<Text style={{fontSize: 16}}>%</Text>
									</Text>
								</View>
								<View style={[styles.flex]}>
									<Text style={styles.temperatureTitle}>{thirdLineTitle}</Text>
									<Text style={styles.temperatureText3}>
										{thirdLineValue}
										<Text style={{fontSize: 16}}>ug</Text>
									</Text>
								</View>
							</View>
						)
					}}
				/>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	flex: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingLeft: 20,
		paddingRight: 20,
	},
	temperatureTitle: {
		color: '#777777',
		fontSize: 13
	},
	temperatureText2: {
		color: '#FF963A',
		fontSize: 30
	},
	temperatureText3: {
		color: '#FB5020',
		fontSize: 30
	},
	temperatureText1: {
		color: '#37B62E',
		fontSize: 30
	},
	settings: {
		height: 224,
		width: width - 30,
    borderRadius: 6,
    paddingTop: 30,
    paddingBottom: 30,
		backgroundColor: '#fff',
		justifyContent:'space-between'
	},
})

export default ThreeLabelBar
